<template>
    <div class="home">
        <div class="Recone">
            <div class="Reconefle">
                <div class="Recrighte">
                    <div class="RecrightTietle" > 碎片阅读 </div>
                </div>
                <div class="Recleft" :style="{backgroundImage:`url(${img})`}">

                    <div class="Chosecot" v-html="randomItem.neirong">

                    </div>
                </div>

                <div class="Recright">
                    <ul class="Recright_top u-f" @click="Choseup" >
                        <img src="../../assets/up.svg" alt="">
                    </ul>

                    <ul class="Recright_middle u-f" >
                        <img v-if="Isshow" src="../../assets/like.svg" @click="ChangeSvg(randomItem.shownimg)" alt="">
                        <img v-else src="../../assets/enjoy.svg" @click="ChangeSvg()" alt="">
                    </ul>
                    <div class="Chosebtn"  @click="ChoseRadom(poeamList)" v-bind="poeamList"> 开始推荐 </div>
                    <ul class="Recright_bottom u-f" @click="Chosedown" >
                        <img src="../../assets/down.svg" alt="">
                    </ul>
                </div>
            </div>

        </div>
    </div>
</template>
<script>
    export default {
        methods:{
            ChangeSvg(show){
                this.randomItem.shownimg = !show;
                this.Isshow = this.randomItem.shownimg;
            },
            ChoseRadom(item){
                if(item.length>0){


                    this.randomItem = item[Math.floor(Math.random() * item.length)];
                    // console.log(this.randomItem);
                    this.ReadHis.push(this.randomItem)
                    for(var i = 0; i < item.length; i++){
                        if(item[i].id === this.randomItem.id){
                            item.splice(i,1);

                            this.ReadHisNumber = this.ReadHis.length;
                            console.log(this.ReadHisNumber)

                        }
                    }
                    this.Isshow = this.randomItem.shownimg;
                    console.log(this.Isshow)
                }else{
                    alert('今日推荐已阅读完')
                }

                // let length  = this.ReadHIs.length
                // this.ReadHisNumber = length;

            },
            Choseup(){
                if(this.ReadHisNumber>1){
                    this.randomItem = this.ReadHis[this.ReadHisNumber-2];
                    console.log(this.ReadHisNumber)
                    console.log(this.ReadHis[this.ReadHisNumber-1])
                    this.Isshow = this.randomItem.shownimg;
                    return this.ReadHisNumber--;

                }else{
                    alert('已经是第一条了')
                }
            },
            Chosedown(){
                if(this.ReadHisNumber<this.ReadHis.length){
                    this.randomItem = this.ReadHis[this.ReadHisNumber];
                    this.Isshow = this.randomItem.shownimg;
                    return this.ReadHisNumber++;
                }else{

                    alert('已经是最后一条了')
                }
            }
        },
        data(){
            return{
                img:require('../../assets/jpg.jpg'),
                randomItem:'',
                ReadHis:[],
                Choserun:true,
                ReadHisNumber:0,
                Isshow:true,
                poeamList:[
                {
                    id:'《一剪梅·红藕香残玉簟秋》',
                    name:'李清照',
                    neirong:'红藕香残玉簟秋。轻解罗裳，独上兰舟。<br/>云中谁寄锦书来，雁字回时，月满西楼。<br/>花自飘零水自流。一种相思，两处闲愁。<br/>此情无计可消除，才下眉头，却上心头。',
                },{
                    id:'《离思五首·其四》',
                    name:'元稹',
                    neirong:'曾经沧海难为水，除却巫山不是云。<br/>取次花丛懒回顾，半缘修道半缘君。',
                },{
                    id:'《南歌子词二首 / 新添声杨柳枝词》',
                    name:'温庭筠',
                    neirong:'一尺深红胜曲尘，天生旧物不如新。<br/>合欢桃核终堪恨，里许元来别有人。<br/>井底点灯深烛伊，共郎长行莫围棋。<br/>玲珑骰子安红豆，入骨相思知不知。',
                }
                ,{
                    id:'《题龙阳县青草湖》',
                    name:'唐珙',
                    neirong:'西风吹老洞庭波，一夜湘君白发多。<br/>醉后不知天在水，满船清梦压星河。',
                }
                ,{
                    id:'《丑奴儿·书博山道中壁》',
                    name:'辛弃疾',
                    neirong:'少年不识愁滋味，爱上层楼。<br/>爱上层楼，为赋新词强说愁。<br/>而今识尽愁滋味，欲说还休。<br/>欲说还休，却道“天凉好个秋”！',
                }
                ,{
                    id:'《摸鱼儿·雁丘词 / 迈陂塘·雁丘词》',
                    name:'元好问',
                    neirong:'问世间，情是何物，直教生死相许？</br>天南地北双飞客，老翅几回寒暑。<br/>欢乐趣，离别苦，就中更有痴儿女。<br/>君应有语：渺万里层云，千山暮雪，只影向谁去？<br/>横汾路，寂寞当年箫鼓，荒烟依旧平楚。<br/>招魂楚些何嗟及，山鬼暗啼风雨。<br/>天也妒，未信与，莺儿燕子俱黄土。<br/>千秋万古，为留待骚人，狂歌痛饮，来访雁丘处。<br/>',
                }
                ,{
                    id:'《蝶恋花·槛菊愁烟兰泣露》',
                    name:'晏殊',
                    neirong:'槛菊愁烟兰泣露，罗幕轻寒，燕子双飞去。<br/>明月不谙离别苦，斜光到晓穿朱户。<br/>昨夜西风凋碧树，独上高楼，望尽天涯路。<br/>欲寄彩笺兼尺素，山长水阔知何处？',
                }

            ]
        }
    }
}
</script>


